<template>
  <div class="detail" style="padding: 20px;position: relative;">
    <!-- <el-button type="primary" @click="exportPdf">导出为PDF</el-button> -->
    <div style="margin-top: 20px">
      <p style="color: rgb(17, 118, 222);
    font-size: 24px;
    font-weight: 700;text-align:center">{{companyName}}{{currentYear}}年申报规划</p>
        <el-badge v-if="activeName=='申报中'&&tabLength>0" style="z-index: 9999999999;position: absolute;top:77px;left: 85px;" :max="999" :value="tabLength" class="item"></el-badge>
        <el-badge v-if="activeName=='未申报'&&tabLength>0" style="z-index: 9999999999;position: absolute;top:77px;left: 165px;" :max="999" :value="tabLength" class="item"></el-badge>
        <el-badge v-if="activeName=='已截止'&&tabLength>0" style="z-index: 9999999999;position: absolute;top:77px;left: 245px;" :max="999" :value="tabLength" class="item"></el-badge>
      <el-tabs  v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in policyType" :key="index" :label="item.name" :name="item.name">
        </el-tab-pane>
        <div style="text-align:right">

          <el-button type="danger" :disabled="multipleSelection?.length <= 0" @click="handleBatchDel" plain>批量删除</el-button>
          <el-button type="primary" :disabled="multipleSelection?.length <= 0" @click="handleBatchFollow" plain>批量关注</el-button>
        </div>
        <!-- <el-scrollbar class="scroll-container"> -->
          <el-table :data="tableData"  height="600" style="width: 100%;margin:20px 0 20px 0;overflow: auto"  stripe class="mb-5"  :header-cell-style="{ background: '#2186F0', color: '#fff', textAlign: 'center' }" @selection-change="handleSelectionChange">
            <el-table-column label="序号" type="index" width="55" align="center">
            </el-table-column>
            <el-table-column label="对口政策" align="center">
              <template #default="scope">
                <a v-for="(item,index) in scope.row.policyList" :key="item.policyId" :href="item.url" target="_blank">{{item.title}}<span v-if="index+1!==scope.row.policyList.length" style="margin:10px;color: #000000;">/</span></a>
              </template>
            </el-table-column>
            <el-table-column prop="orgName" label="主管部门" align="center">
<template #default="scope">
                <a v-for="(item,index) in scope.row.orgList" :key="item.orgId" :href="item.url" target="_blank">{{item.name}}<span v-if="index+1!==scope.row.orgList.length" style="margin:10px;color: #000000;">/</span></a>
              </template>
            </el-table-column>

            <el-table-column prop="typeName" width="100" label="政策类型" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="cutOffTime"
              label="截止时间"
              align="center"
              sortable show-overflow-tooltip
              width="110"
            >
            </el-table-column>
            <el-table-column type="selection" align="center"  width="60" />

          </el-table>
        <!-- </el-scrollbar> -->
      </el-tabs>
      <div style="text-align:center">
        <el-button type="primary" @click="handleSave" plain>保存修改</el-button>
        <el-button type="primary" @click="exportPdf">规划下载</el-button>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { forEach } from "lodash";
import { ref, reactive, onMounted,watch } from "vue";
import { exportWord } from "../../utils/pdf";
import { saveFollow,savePlanDetail } from "../../service/matching/";
import { useRoute } from 'vue-router';
const route = useRoute();
const paramName = route.params.name
const activeName = ref("申报中");
const delData = ref([])
const content = ref([])
const props = defineProps({ data: { type: Object, default: {} },
companyID:{type:String,default:''},
form:{type:Object,default:{}},companyName:{type:String,default:''}});
const tableData = ref([]);
watch(()=>props.data,(newData)=>{
content.value = props.data
console.log(content.value,'props.data')

tableData.value = props.data.filter((item) => {
  activeName.value = '申报中'
  console.log('------')
    if (item.statusName == '申报中') {
      return item;
    }
  });
  // 已截止、已截止、已申报数量
  tabLength.value = tableData.value.length||0
})

const policyType = ref([
  { name: "申报中", value: "申报中" },
  { name: "未申报", value: "未申报" },
  { name: "已截止", value: "已截止" }
]);

const exportPdf = async () => {
  // handleSave()
  const pdfData = JSON.parse(localStorage.getItem("pdfData"));
  const params = {...pdfData}
  console.log(content.value,'content.value1')
  // params.policyList = content.value.length>0?content.value:JSON.parse(localStorage.getItem("pdfData")).policyList
  params.policyList = content.value
  const normalCount = ref(0)
  const normalCount1 = ref(0)
  const normalCount2 = ref(0)
  const normalCount3 = ref(0)
  const normalCount4 = ref(0)

  content.value.forEach((item,index)=>{
    item.sortNo = index+1
    if(item.typeName == '专项资金'){
      normalCount1.value++
    }else if(item.typeName == '荣誉资质'){
      normalCount2.value++
    }else if(item.typeName == '赛事活动'){
      normalCount3.value++
    }else if(item.typeName == '其他'){
      normalCount4.value++
    }
  })
  params.normalCount = normalCount1.value+normalCount2.value+normalCount3.value+normalCount4.value
  params.normalCount1 = normalCount1.value
  params.normalCount2 = normalCount2.value
  params.normalCount3 = normalCount3.value
  params.normalCount4 = normalCount4.value
  // await exportWord(params, params.company.companyNameList[0] + ".docx");
  await exportWord(params, params.company.companyNameList[0] + Date.now() + ".docx");
  // content.value = []
};
const tabLength = ref(0)

const handleClick = (tab) => {
  // 判断在哪一个标签页
  console.log(props.data)
  // 如果有删除过规划 与原数据比较 得出没有被删除的 展示在表格中tableData 并根据标签页分类
  tableData.value = props.data.filter(obj => !delData.value.includes(obj));
  // console.log(tableData.value,'删掉之后还在的')
  tableData.value = tableData.value.filter((item:any) => {
      if (item.statusName == tab.props.name) {
      return item;
    }
  });

  // const data = props.data.filter(obj => delData.value.includes(obj))
  // console.log(data.value,'data')
  // content.value = props.data.filter(obj => !data.includes(obj))

  // console.log('content.value',content.value)
  // console.log('data',data)

  // 已截止、已截止、已申报数量
  tabLength.value = tableData.value.length||0
};
handleClick({props:{name:'申报中'}})
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val
};
const handleBatchDel = () => {
  // 去重
  console.log(content.value,'content.value2删除')

  const uniqueElements = new Set([...tableData.value, ...multipleSelection.value])
  tableData.value = Array.from(uniqueElements).filter(item => !multipleSelection.value.includes(item));
  const del = Array.from(uniqueElements).filter(item => multipleSelection.value.includes(item))
  delData.value.push(...del);
  delData.value = Array.from(new Set(delData.value))
  content.value = props.data.filter(obj => !delData.value.includes(obj))
  tabLength.value = tableData.value.length||0
  console.log(content.value,'----------content.value')
  console.log(tableData.value,'删除后',delData.value)
};
const handleBatchFollow = () => {
  let params = []
  multipleSelection.value?.forEach(res=>{
    params.push(res.policyId)
  })
  saveFollow({collectIds:params}).then(res=>{
    if (res.code == 200) {
        ElNotification({
          title: "批量关注成功",
          message: "可在我的关注中查看",
          type: "success"
        });
      } else {
        ElNotification({
          title: "批量关注失败",
          message: "请联系管理员处理",
          type: "error"
        });
      }
  })
};
const handleSave = async()=>{
  console.log(content.value,'content.value3保存')

  // console.log('----',content.value)
  // console.log('--tableData--',JSON.parse(localStorage.getItem("pdfData")).policyList)
  const data = JSON.parse(localStorage.getItem("pdfData"))
  console.log(data,'[apds[asdpsa[dpa]]]')
  const params = {
    id: localStorage.getItem('savePlanId'),
        companyId: props.companyID,
        companyName: props.form.keyword,
        revenueScale: props.form.price,
        content: JSON.stringify({
          ...data,
          policyList:content.value
        })
  }
console.log(JSON.parse(params.content),'params')
  const result = await savePlanDetail(params);
  localStorage.setItem("savePlanId", result.data)
  if (result.code == 200) {
    // content.value = []
        ElNotification({
          title: "保存成功",
          dangerouslyUseHTMLString: true,
          message: `可在我的规划中查看,<span style="color: #3d5cff; cursor: pointer;">去查看</span>`,
          type: "success",
          onClick() {
            // const { id, companyId, companyName, revenueScale } = item
            window.open(`${location.origin}/matching?id=${result.data}&name=${params.companyName}&companyId=${params.companyId}&scale=${params.revenueScale}`)
          },
        });
      } else {
        ElNotification({
          title: "保存失败",
          message: "请联系管理员处理",
          type: "error"
        });
      }
}

    const currentYear = ref();
    const getCurrentDate = () => {
      const date = new Date();
      const year = date.getFullYear();
      currentYear.value = year
    }
    getCurrentDate()
</script>

<style  lang="postcss" scoped>
.scroll-container {
  height: 700px; /* 设置一个固定高度 */
  overflow-y: auto; /* 开启垂直滚动条 */
}
.detail {
  :deep(.el-tabs__nav-scroll) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
  }
  :deep(.el-tabs__active-bar) {
    background-color: #3662ae;
  }
  :deep(.el-tabs__item) {
    color: #3662ae;
    padding: 0 20px !important;
  }
  :deep(.el-tabs__item.is-active) {
    color: #ffffff;
    background-color: #3662ae;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 4px;
    background-color: #3662ae;
  }
  .cell-item {
    font-size: 14px !important;
    font-weight: 900;
    width: 70px;
  }
  :deep(.el-descriptions__cell) {
    font-size: 14px !important;
  }
  @apply px-4 py-3;
  /* 样式用于全屏加载的覆盖层 */
  .loading-overlay {
    @apply overflow-hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  a {
    @apply text-theme-color;
  }
  .rich-text {
    white-space: pre-wrap;
  }
  :deep(.ql-align-center) {
    text-align: center;
  }
  .detail-title {
    @apply text-center my-8 font-bold flex justify-between items-center relative;
    font-size: 24px;
    .title {
      @apply mx-auto;
      width: calc(100% - 600px);
    }
    .util-list {
      @apply flex absolute right-0;
      font-size: 12px;
      width: 280px;
      .btn {
        @apply relative flex justify-center items-center bg-white mr-4 rounded-md;
        width: 54px;
        height: 34px;
        transition: all 0.3s;
        .counter {
          @apply absolute rounded-full bg-red-500 text-center text-white;
          width: 20px;
          height: 20px;
          top: -10px;
          right: -10px;
          font-size: 10px;
          line-height: 20px;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
      .active {
        background: #3fabf4a0;
      }
      .share-box {
        .share-item {
          @apply flex items-center px-3 py-2 cursor-pointer;
          &:hover {
            background: #f6f4f4;
          }
          .text {
            margin-left: 14px;
          }
        }
      }
      .wx-qrcode {
        @apply px-3 py-2 flex justify-center flex-wrap;
        .tip-text {
          @apply mb-2;
        }
      }
    }
  }
  /* user-select: none; */
  .content {
    @apply w-3/4 mx-auto overflow-x-auto;
    :deep(p) {
      font-size: 16px;
      span {
        font-size: 16px !important;
      }
    }
    :deep(a) {
      @apply text-theme-color;
    }
    .side-bar {
      @apply fixed flex flex-wrap justify-center;
      bottom: 10%;
      right: 8%;
      width: 48px;
      :deep(.el-backtop) {
        position: relative;
        right: 0 !important;
        bottom: 0 !important;
      }
      .btn {
        @apply relative flex justify-center items-center rounded-full mb-8 bg-white;
        width: 48px;
        height: 48px;
        transition: all 0.3s;
        .counter {
          @apply absolute rounded-full bg-red-500 text-center text-white;
          width: 20px;
          height: 20px;
          top: -10px;
          right: -10px;
          font-size: 10px;
          line-height: 20px;
        }
        img {
          width: 30px;
          height: 30px;
        }
      }
      .active {
        background: #3fabf4a0;
      }
      .share-box {
        .share-item {
          @apply flex items-center px-3 py-2 cursor-pointer;
          &:hover {
            background: #f6f4f4;
          }
          .text {
            margin-left: 14px;
          }
        }
      }
      .wx-qrcode {
        @apply px-3 py-2 flex justify-center flex-wrap;
        .tip-text {
          @apply mb-2;
        }
      }
    }
    .attachment-content {
      @apply mt-3;
      .title {
        @apply mb-2;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .article-origin {
      @apply my-3;
      .title {
        @apply mb-2;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .attachment-list {
      @apply mb-5;
      .title {
        @apply mb-2 mt-5;
        font-size: 18px;
        font-weight: bold;
      }
      .list {
        .item {
          @apply mb-2 flex items-center cursor-pointer rounded-md;
          /* @apply bg-gray-200 text-center py-5 cursor-pointer rounded-md; */
          font-size: 16px;
          .file-name {
            @apply ml-2;
            color: #409eff;
            text-decoration: underline;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* 设置元素的宽度，可以根据需要调整 */
          }
        }
      }
    }
  }
}
</style>
